<template>
  <div class="table-list">
    <div
      class="list-node table-node"
      @click.prevent.stop="hasChild?expanded=!expanded:$emit('click',node,$event);"
      @dblclick.prevent.stop="$emit('dblclick',node,$event)"
      @contextmenu.prevent.stop="$emit('contextmenu',node,$event)"
    >
      <div v-for="(item,key) in nodeData" :key="key" class="list-node-text table-node-text">
        <i v-for="(num, index) in numberNode" :key="index" class="list-node-icon" />
        <i :class="['list-node-icon',{[expanded?'far fa-minus-square':'far fa-plus-square']:hasChild}]" />
        {{ item }}
      </div>
    </div>
    <node-panel-table
      v-for="(item, index) in children"
      v-show="expanded"
      :key="index"
      class="list-child"
      :node="item"
      :data="data"
      :num-node="numberNode"
      :tree-template="treeTemplate"
      :expand="expand"
      :table-model="tableModel"
      :table-template="tableTemplate"
      @click="$emit('click',$event)"
      @dblclick="$emit('dblclick',$event)"
      @contextmenu="$emit('contextmenu',$event)"
    />
  </div>
</template>
<script>
export default {
  name: 'NodePanelTable',
  props: {
    node: {
      type: Object,
      required: true,
      default: () => {}
    },
    data: {
      type: Array,
      required: true,
      default: () => []
    },
    treeTemplate: {
      type: Object,
      required: false,
      default: () => ({
        label: 'name',
        key: 'uid',
        item: 'item_uid',
        parent: 'parent_uid'
      })
    },
    expand: {
      type: Boolean,
      required: false,
      default: false
    },
    tableModel: {
      type: Boolean,
      required: false,
      default: true
    },
    tableTemplate: {
      type: Object,
      required: false,
      default: () => ({
        id: { name: 'ID' },
        name: { name: '名称' },
        flag: { name: '标识' }
      })
    },
    numNode: {
      type: Number,
      default: () => 0
    }
  },
  data() {
    return {
      hackReset: true,
      expanded: this.expand
    }
  },
  computed: {
    children() {
      return this.data && this.node
        ? this.node.children ||
          (this.node[this.treeTemplate.key] ? this.data.filter(item => item[this.treeTemplate.parent] === this.node[this.treeTemplate.key]) : []) ||
          (this.node[this.treeTemplate.item] ? this.data.filter(item => item[this.treeTemplate.parent] === this.node[this.treeTemplate.item]) : [])
        : []
    },
    hasChild() {
      return this.children && this.children.length > 0
    },
    nodeData() {
      return Object.keys(this.tableTemplate).reduce((result, key) => ({ ...result, [key]: this.node ? this.node[key] : null }), {})
    },
    numberNode() {
      return this.numNode + 1
    }
  },
  watch: {
    expand(val, oldval) {
      this.expanded = val
    }
  }
}
</script>
<style scoped>
/* .table-list {
  max-height: 100vh;
  overflow: auto;
} */
.list-node {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}
.list-node:hover {
  background-color: #ecf5ff !important;
}
.list-node-text {
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.list-node-icon {
  display: none;
  width: 1.3rem;
}
.list-node .list-node-text:first-child i {
  display: inline-block;
}
/* .list-child { */
  /* padding-left: 1rem; */
/* } */
.list-node .list-node-text:nth-child(1) {
  width: 45%;
}
.list-node .list-node-text:nth-child(2) {
  width: 35%;
}
.list-node .list-node-text:nth-child(3) {
  width: 20%;
}
/* display of table model only */
.table-node {
  border-right: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
}
.table-node-text {
  padding: .5rem 0;
  border-left: 1px solid #e8e8e8;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
